<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.box {
  font: 10px sans-serif;
}

.box line,
.box rect{
  fill: white;
  //fill: steelblue;
  stroke: #000;
  stroke-width: 1px;
}

.box .center {
  stroke-dasharray: 3,3;
}

.box .outlier {
  fill: none;
  stroke: #000;
}

circle {
  stroke: none;
  fill: steelblue;
}

.highlighted{
	fill: darkblue;
}

.tooltip {
	  position: absolute;           
	  text-align: center;           
	  width: 60px;                  
	  height: 48px;                 
	  padding: 2px;             
	  font: 12px sans-serif;        
	  background: purple;
	  color: white;   
	  border: 1px;      
	  border-radius: 8px;           
	  pointer-events: none;  
}

.axis {
  font: 12px sans-serif;
}
 
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
 
.x.axis path { 
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}




svg {
  font: 10px sans-serif;
  padding: 10px;
}

.axis,
.frame {
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #ddd;
}


.frame {
  fill: none;
  stroke: #aaa;
}

circle {
  fill-opacity: .7;
}

circle.hidden {
  fill: #ccc !important;
}

.extent {
  fill: #000;
  fill-opacity: .125;
  stroke: #fff;
}


</style>
<body>
<script src="/static/d3.min.js"></script>
<script src="/static/box.js"></script>
<script src="/static/box_and_scatter.js"></script>
<script>var data = {{box_data|safe}} </script>
<script>var data_labels = {{labels|safe}} </script>
<script>var ctrls = {{ctrls|safe}} </script>
<script>var groupdesc = "{{groupdesc}}" </script>

<script>
var labels = false; // show the text labels beside individual boxplots?

var margin = {top: 30, right: 50, bottom: 180, left: 100};
var  width = 1200 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
	
var min = Infinity,
    max = -Infinity;


// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);


draw_box_scatter(data, ctrls, groupdesc);


</script>
